<template>
	<el-dialog
		:width="width"
		:visible.sync="dialogVisible"
		:title="title"
		:fullscreen="currentFullScreen"
		:top="dailogTop"
		:custom-class="classes"
		append-to-body
		:close-on-click-modal="closeOnClickModal"
		:before-close="onBeforeClose"
		class="wind-dialog "
		@close="onClose">
		<div slot="title" class="wind-dialog__title fx-block-title">
			<slot name="title">
				<div class="wind-dialog__title-label">
					{{title}}
					<div v-if="$slots.sub" class="wind-dialog__title-sub">
						<slot name="sub"></slot>
					</div>
				</div>
			</slot>
			<el-popover
				popper-class="dialog-tools-popover"
				placement="bottom"
				trigger="click">
				<div>
					<slot name="tools"></slot>
				</div>
				<div v-show="showMoreBtn" slot="reference" class="wind-dialog__title-tools fx-cursor"><w-icon type="header-more"></w-icon><span>更多</span></div>
			</el-popover>
		</div>
		<div v-if="$slots.footer" slot="footer" class="wind-dialog__bottom" :class="[`align-${footAlign}`]">
			<slot name="footer"></slot>
		</div>
		<slot :fullScreen="currentFullScreen"></slot>
	</el-dialog>
</template>
<script>
/**
 * Dialog by shang 2020/2/25
 * @desc Dialog 模态窗
 * @params value[Boolean] 窗口开启/关闭
 * @params title[String] 标题
 * @params width[String] 宽度
 * @params fullscreen[Boolean] 全屏
 * @params top[String] 距离顶部高度
 * @params closeOnClickModal[Boolean] 点击遮罩关闭
 * @params showMoreBtn[Boolean] 显示更多按钮
 * @params footAlign[String] foot对齐方式
 * @params beforeClose[Function] 点击X按钮关闭前回调
 *
 * @slot defalut 内容插槽
 * @slot tools 更多-按钮栏 插槽
 * @slot footer 底部插槽
 */
export default {
	name: 'wind-dialog',
	props: {
		value: null,
		title: null,
		width: {
			type: String,
			default: '50%'
		},
		fullscreen: Boolean,
		heightFullscreen: Boolean,
		top: {
			type: String,
			default: '15vh'
		},
		closeOnClickModal: Boolean,
		showMoreBtn: Boolean,
		footAlign: {
			type: String,
			default: 'right'
		},
		beforeClose: Function
	},
	data () {
		return {
			dialogVisible: false,
			currentFullScreen: false
		}
	},
	computed: {
		dailogTop () {
			return this.heightFullscreen ? '0' : this.top
		},
		classes () {
			const defaultClass = 'wind-custom-dialog'
			if (this.heightFullscreen) {
				return `${defaultClass} wind-dialog-is-heightFullscreen`
			}
			return defaultClass
		}
	},
	watch: {
		value: {
			immediate: true,
			handler (val) {
				if (val) {
					this.currentFullScreen = this.fullscreen
				}
				this.dialogVisible = val
			}
		},
		dialogVisible (val) {
			if (!val) {
				this.$fxEventBus.$emit('on-dialog-close', this.title)
				this.$emit('input', false)
			} else {
				this.$fxEventBus.$emit('on-dialog-open', this.title)
			}
		},
		fullscreen: {
			immediate: true,
			handler (val) {
				this.currentFullScreen = val
			}
		}
	},
	methods: {
		onClose () {
			this.$emit('close')
		},
		onBeforeClose (close) {
			if (typeof this.beforeClose === 'function') {
				this.beforeClose(close)
			} else {
				close()
			}
		},
		onFullScreen () {
			this.currentFullScreen = true
		},
		offFullScreen () {
			this.currentFullScreen = false
		},
		isFullScreen () {
			return this.currentFullScreen
		}
	}
}
</script>
<style lang="stylus" scoped>
.wind-dialog {
	>>>.el-dialog__headerbtn {
		top: 27px
	}
	&__title {
		display: flex;
		flex-direction: row;
		height: 30px;
		line-height: 30px;
		align-items: center;
		position:relative
		padding-left: 5px
		&-label {
			flex: 1
			height: 30px;
			line-height: 30px;
			font-size: 15px;
			font-weight: 700;
			display:flex
			.wind-dialog__title-sub {
				position: relative
				flex: 1
				margin-left: 20px
				font-size: 12px
			}
		}
		&-tools {
			width: 50px
			margin-right: 30px
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}
	>>>.wind-custom-dialog {
		display: flex;
		flex-direction: column;
		margin-bottom: 0
		&.wind-dialog-is-heightFullscreen {
			height: 100%
		}
		.el-dialog__title {
			font-size: 14px
		}
		.el-dialog__body {
			flex: 1
			display: flex;
			flex-direction: column;
			font-size: 12px
			overflow: auto
			padding-top: 10px
			padding-bottom:10px
			box-sizing: border-box;
		}
	}
	&__bottom {
		text-align: right;
		height: 40px;
		line-height: 40px
		&.align-right {
			text-align: right;
		}
		&.align-left {
			text-align: left;
		}
		&.align-center {
			text-align: center;
		}
	}
}
</style>

